<template>
  <view class="container">
	  <view class="head">
	  	<text class="title">发布社招</text>
		<view class="steps">
			<image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29ea573c.png" class="steps-img"></image>
			<view class="steps-title">
				<text class="steps-text">填写基本信息</text>
				<text class="steps-text">选择职位要求</text>
			</view>
		</view>
	  </view>
    <!-- 招聘类型 -->
    <view class="section">
      <text class="section-title">招聘类型</text>
      <view class="button-group" >
		<label	  class="button-item"
		          :style="{ backgroundColor: recruitmentType === '社招全职' ? '#CACCFF' : '#ddd' }"
		          @click="handleTypeChange('社招全职')">社招全职</label>
        <label class="button-item"
                  :style="{ backgroundColor: recruitmentType === '大学生招聘' ? '#CACCFF' : '#ddd' }"
                  @click="handleTypeChange('大学生招聘')">大学生招聘</label>
        <label class="button-item"
                  :style="{ backgroundColor: recruitmentType === '直招窗口' ? '#CACCFF' : '#ddd' }"
                  @click="handleTypeChange('直招窗口')">直招窗口 </label>
        <label class="button-item"
                  :style="{ backgroundColor: recruitmentType === '兼职' ? '#CACCFF' : '#ddd' }"
                  @click="handleTypeChange('兼职')">兼职 </label>
		</view>
	</view>

    <!-- 职位名称 -->
    <view class="section" @click="goToJobTitlePage">
      <text class="section-title">职位名称</text>
       <view class="input-container">
          <text class="input">{{ jobTitle || '请输入职位名称' }}</text>
          <uni-icons type="arrowright" size="16" color="#000" ></uni-icons>
        </view>
    </view>

    <!-- 职位描述 -->
    <view class="section" @click="goToJobDescriptionPage">
      <text class="section-title">职位描述</text>
     <view class="input-container">
         <text class="input">{{ jobDescription || '介绍工作内容、职位要求、加分项' }}</text>
         <uni-icons type="arrowright" size="16" color="#000" ></uni-icons>
       </view>
    </view>

	<text class="section-note">注：职位名称、职位类型和工作城市发布后不可修改</text>

    <!-- 下一步按钮 -->
    <button class="next-button" @click="handleNextStep">下一步</button>
  </view>
</template>

<script>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'; // 根据实际路径调整
export default {
	components: {
	    uniIcons,
	  },
  data() {
    return {
      recruitmentType: '社招全职', // 默认招聘类型
      jobTitle: '', // 职位名称
      jobDescription: '', // 职位描述
    };
  },
  methods: {
    // 处理招聘类型变化
    handleTypeChange(type) {
      this.recruitmentType = type;
    },

    // 处理下一步按钮点击
    handleNextStep() {
      if (!this.jobTitle || !this.jobDescription) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none',
        });
        return;
      }

      // 跳转到下一步页面
      uni.navigateTo({
        url: '/pages/form/job-requirements', // 替换为实际的下一个页面路径
      });
    },
	// 跳转到职位名称选择页面
	  goToJobTitlePage() {
	    uni.navigateTo({
	      url: `/pages/form/job-title-select?jobTitle=${this.jobTitle}`, // 替换为实际的职位名称选择页面路径
	    });
	  },
	  // 跳转到职位描述页面
	    goToJobDescriptionPage() {
	      uni.navigateTo({
	        url: `/pages/form/job-description?jobDescription=${this.jobDescription}`, // 替换为实际的职位名称选择页面路径
	      });
	    },
  },
};
</script>

<style>
.container {
  padding: 20px;
}

.head {
		width: 100%;
		/* padding-top: 124rpx; */
	}

.title {
	width: 150px;
	height: 28px;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 0px;
	color: #000;
	display: block;
	margin-bottom: 5px;
}

.steps{
	text-align: center;
}

.steps-img{
	text-align: center;
	width: 269px;
	height: 21px;
}

.steps-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.steps-text{
	color: #343434;
	font-family: "PingFang SC";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	
}

.section {
  margin-bottom: 20px;
  
}

.section:nth-child(n+3){
	border-bottom: 1px solid #EBEBEB;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.section uni-icons {
  vertical-align: middle; /* 垂直居中 */
  margin-left: 8px; /* 调整图标与输入框的间距 */
}

.button-group {
  display: flex;
  flex-wrap: wrap;
}

.button-item {
  display: inline-block;
  margin: 0 10px 14px 0;
  width: 170px;
  height: 44px;
  text-align: center;
	line-height: 44px;
	color: #333;
	cursor: pointer;
}

.button-item:nth-child(2n){
	margin-right: 0;
}

.input-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  padding-right: 8px; /* 右侧内边距，避免图标紧贴边框 */
}

.input-container .input {
	height: 50px; 
  flex: 1; /* 占据剩余空间 */
  border: none; /* 去掉默认边框 */
  outline: none; /* 去掉聚焦时的外边框 */
  font-size: 14px;
}

.input-container uni-icons {
  margin-left: 8px; /* 图标与输入框的间距 */
}

.section-note{
	 margin-top: 10px; /* 使用 margin 控制间距 */
	color: #B8B8B8;
	font-family: "PingFang SC";
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.next-button {
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
  color: #ffffff;
  border-radius: 32px;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
</style>